<style scoped>
    .wraper {
        padding: 0;
        margin-top: -20px;
    }
    
    .search {
        padding-bottom: 20px;
    }
    
    .search span {
        color: #68777c;
        font-weight: bold;
        padding-right: 18px;
    }
    
    .search button {
        background-color: #00a8f7;
        color: #fff;
        margin-left: 8px;
    }
    
    .top {
        margin-bottom: 20px;
        border-top: 1px dashed #cccccc;
    }
    
    .detail {
        border-top: 1px dashed #cccccc;
    }
    
    .wraper .headline {
        position: relative;
        font-size: 12px;
        color: #303134;
        font-weight: bold;
        margin: 10px 0;
        line-height: 32px;
        height: 32px;
    }
    
    .wraper .add-agent {
        position: absolute;
        top: 0px;
        right: 30px;
        background-color: #348bf2;
        color: #fff;
    }
    
    .iconfont {
        font-size: 14px;
    }
    
    
    
    /* 分页 start */
    
    .pagestyle {
        margin: 20px 0;
        float:right;
        padding-right: 15px;
    }
    
    
    /* 分页 end */
    
    .leftside{
        overflow-y: auto;
        border-right: 1px solid #e9eaec;
       
    }
    .leftside-search{
        padding: 10px;
    }
    .leftside-list{
        overflow-y: auto;
    }
    .leftside-list ul li{
        padding: 10px;
        cursor: pointer;
    }
    
    .leftside-list ul li:hover{ 
        background: rgba(64,116,225,0.3);
        color:#4074e1;
        border-right: 4px solid #4074e1;
    }
    .leftside-list ul li:hover a{
        color:#4074e1;
    }
    .leftside-list .active,.leftside-list ul li.active:hover{
        background-color: #4074e1;
        color:#fff;
    }
    .leftside-list .active a,.leftside-list ul li.active:hover a{
        color: #fff;
    }
    .leftside-listspan{
        max-width: 75%;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        display: inline-block;
        vertical-align: bottom;
        color: #000;
    }
    .leftside-edit{
        font-size: 18px;
    }
    .poptip-ul{
        color: #000;
    }
    .leftside-list ul li .poptip-ul li:hover{
        background-color: #4074e1;
        color:#fff;
    }
    .rightside-title{
        padding: 20px;
    }
    .rightside-title h3{
        display: inline-block;
        font-size: 18px;
        font-weight: normal;
    }
    .title-total{
        font-size: 14px;
        color: #999;
    }
    .fr{
        float: right;
    }
    .rightside-content{
        padding: 5px;
    }
    .line{
        margin-top: 20px;
        margin-bottom: 20px;
        width: 100%;
        height: 1px;
        border-bottom: 1px dotted #dddee1;
        clear: both;
    }
    .center{
        text-align: center
    }
    .mr10{
        margin-right: 10px;
    }
    .title_left,.title_right{
        height: 40px;
        font-size: 18px;
        line-height: 40px;
        padding-left: 15px;
        background-color: #f8eff0;
    }
    .title_left{
        border-right: 1px solid #e9eaec;
    }
    </style>
    
    
    <template>
        <div class="salmanage">
            <product-title></product-title>
            <div class="wraper">
                <Row>
                    <Col class="title_left" span="4">
                        <div>职级名称</div>
                    </Col>
                    <Col class="title_right" span="20">
                        <div>薪酬组成</div>
                    </Col>
                </Row>
                <Row>
                    <Col span="4">
                        <div class="leftside">
                            
                            <div class="leftside-list" :style="leftHeight">
                                <ul>
                                    <li v-for="(item,index) in ranklist" :key="item.id" :class="active == index ?'active':''" @click="leftActive(index)"><Icon type="document-text"></Icon>
                                        <a class="leftside-listspan" href="javascript:;" :title="item.name">{{item.name}}</a>
                                    </li>                                                 
                                </ul>
                            </div>
                        </div>
                    </Col>
                    <Col span="20">
                        <div class="rightside">
                            <div class="rightside-title">
                                <h3>{{rightTitle}}薪酬组成</h3>                            
                                <!-- <Button type="primary" shape="circle" icon="plus" class="fr" @click="savecheck()">保存考核标准</Button> -->
                            </div>
                            <div class="rightside-content">
                                <!-- <Table border ref="selection" :columns="columns4" :data="data1"></Table> -->
                                <Form :model="check" ref="check" :rules="checkruleValidate" :label-width="100">
                                   
                                        <Col span="15" class="mr10">
                                            <Table border ref="selection" :columns="columns4" :data="data1"></Table>
                                        </Col>                           
    
                                    <div class="line"></div>
                                 
                                </Form>
                            </div>
                        </div>
                        <Spin size="large" fix v-if="spinShow"></Spin>
                    </Col>
                </Row>
            </div>  
        </div>
    </template>
    
    <script>
    import productTitle from '../../components/productTitle'
    import { creatBasicLaw , getCheck  , getCheckDate , getDetail} from '../../api/basiclaw'
    import { getRankList} from '../../api/rank'
    import util from '../../libs/util.js';
    export default {
        data() {
            return {
                spinShow:false,
                cou:-1,
                active:0,
                showAddModal:false,
                showeditModal:false,
                closeable: false,
                loading:true,
                leftHeight: {
                    height: '0px'
                },
                rightHeight: {
                    height: '0px'
                },
                dataLeft: [
                    
                ],
                check:{
                    date:'',
                    next_rank_id:'',
                    check:[],
                    type:1
                },
                checkmodal:{
                    
                    id:'',
                    name:'',
                    symbol:'',
                    param:'',
                    unit:''
                    
                },
                rightTitle:'',
                roleList:[],
                planb:false,
                columns4: [
                        {
                            title: '序号',
                            type: 'index',
                            align: 'center',
                        },
                        {
                            title: '薪酬组成',
                            key: 'symbol',
                            align: 'center',
                        },
                        // {
                        //     title: '晋升考核值',
                        //     key: 'allname',
                        //     align: 'center',
                        // },
                        // {
                        //     title: '操作',
                        //     key: 'action',
                        //     width: 150,
                        //     align: 'center',
                        //     render: (h, params) => {
                        //         return h('div', [                                
                        //             h('Button', {
                        //                 props: {
                        //                     type: 'error',
                        //                     size: 'small'
                        //                 },
                        //                 on: {
                        //                     click: () => {
                        //                         console.log(params)
                        //                         this.remove(params.index)
                        //                     }
                        //                 }
                        //             }, '删除')
                        //         ]);
                        //     }
                        // }
                        
                    ],
                    columns1: [
                        {
                            title: '晋升考核项目',
                            key: 'name',
                            align: 'center',
                        },
                        {
                            title: '晋升考核条件',
                            key: 'symbol',
                            align: 'center',
                        },
                        {
                            title: '晋升考核值',
                            key: 'allname',
                            align: 'center',
                        },
                        // {
                        //     title: '操作',
                        //     key: 'action',
                        //     width: 150,
                        //     align: 'center',
                        //     render: (h, params) => {
                        //         return h('div', [                                
                        //             h('Button', {
                        //                 props: {
                        //                     type: 'error',
                        //                     size: 'small'
                        //                 },
                        //                 on: {
                        //                     click: () => {
                        //                         this.remove2(params.index)
                        //                     }
                        //                 }
                        //             }, '删除')
                        //         ]);
                        //     }
                        // }
                        
                    ],
                    data1: [
                        
                    ],
                    data2: [
                        
                    ],
                    ruleValidate: {
                        id:[
                            { required: true, message: '考核项目不能为空', trigger: 'change' }
                        ],
                        symbol: [
                            { required: true, message: '参数符号不能为空', trigger: 'change' },
                        ],
                        param: [
                            { required: true, message: '参数不能为空', trigger: 'blur' }
                        ],
                    },
                    checkruleValidate:{
                        date:[
                            { required: true, message: '考核周期不能为空', trigger: 'change' }
                        ],
                        next_rank_id:[
                            { required: true, message: '降级后职级不能为空', trigger: 'change' }
                        ]
                    },
                    ranklist:[],
                    checkdate:[],
                    checklist:[],
                    symbollist:[]
            }
        },
        components: {
            productTitle
        },
        computed:{
            checked:function(){
                let arry = []
                let _data = this.data1
                let _length = _data.length
                if(_length){
                    for(let i=0;i<_length;i++){
                        let _arry = []
                        _arry.push(_data[i].id,_data[i].name,_data[i].className,_data[i].symbol,_data[i].param,_data[i].unit)
                        arry.push(_arry)
                    }
                }
                return  arry          
            },
            checked2:function(){
                let arry = []
                let _data = this.data2
                let _length = _data.length
                if(_length){
                    for(let i=0;i<_length;i++){
                        let _arry = []
                        _arry.push(_data[i].id,_data[i].name,_data[i].className,_data[i].symbol,_data[i].param,_data[i].unit)
                        arry.push(_arry)
                    }
                }
                return  arry          
            }
        },
        created() {
            let winHeight = screen.availHeight;
            this.leftHeight.height = (winHeight  - 280 - 32) + 'px';
            this.rightHeight.height = (winHeight - 280) + 'px';
            this.spinShow = true
            this.getRankList()
            //this.getCheck()
            this.getCheckDate()
        },
        methods: {
            //保存考核标准
            savecheck(){
                
                this.check.check = this.checked
                this.check.check_other = this.checked2
                this.check.rank_id = this.rank_id
                new Promise((resolve, reject) => {
                    creatBasicLaw(this.check).then(response => {
                        //console.log(response.data)
                        if (response.data.err == 0) {
                            this.$Message.success(response.data.info);                
                        } else {
                            this.$Message.error(response.data.info);                                
                        }
                        resolve();
                    }).catch(error => {
                        reject(error);
                    });
                });
                   
                
            },
            getDetail(){
                let _param = {
                    rank_id : this.rank_id,
                    type:1
                }
                new Promise((resolve, reject) => {
                    getDetail(_param).then(response => {
                        this.spinShow = false
                        if (response.data.err == 0) {
                            //console.log(response.data.data.id?true:false)
                            if(response.data.data){
                                this.check = response.data.data
    
                                if(response.data.data.check&&response.data.data.check.length > 0 ){
                                for(var i = 0;i<response.data.data.check.length;i++){
                                    var _obj = {}
                                    _obj.id = response.data.data.check[i][0]
                                    _obj.name = response.data.data.check[i][1]
                                    _obj.className = response.data.data.check[i][2]
                                    _obj.symbol = response.data.data.check[i][3]
                                    _obj.param = response.data.data.check[i][4]
                                    _obj.unit = response.data.data.check[i][5]
                                    _obj.allname = response.data.data.check[i][4] + response.data.data.check[i][5]
                                    this.data1.push(_obj)
                                }
                            }else{
                                this.data1 = []
                            }
                            // if(response.data.data.check_other&&response.data.data.check_other.length > 0 ){
                            //     this.planb = true
                            //     for(var i = 0;i<response.data.data.check_other.length;i++){
                            //         var _obj = {}
                            //         _obj.id = response.data.data.check_other[i][0]
                            //         _obj.name = response.data.data.check_other[i][1]
                            //         _obj.className = response.data.data.check_other[i][2]
                            //         _obj.symbol = response.data.data.check_other[i][3]
                            //         _obj.param = response.data.data.check_other[i][4]
                            //         _obj.unit = response.data.data.check_other[i][5]
                            //         _obj.allname = response.data.data.check_other[i][4] + response.data.data.check_other[i][5]
                            //         this.data2.push(_obj)
                            //     }
                            // }else{
                            //     this.data2 = []
                            // }
                            }else{                           
                                this.check = {
                                    date:'',
                                    next_rank_id:'',
                                    check:[],
                                    type:1
                                }
                            }
                            
                                          
                        } else {
                            this.$Message.error(response.data.info);                                
                        }
                        resolve();
                    }).catch(error => {
                        reject(error);
                    });
                });
            },
            //添加第二类考核
            addplan(){
                this.planb = !this.planb
            },
            //考核项目change
            checkIdChange(item){
                let index = item.value
                let label = item.label
                this.checkmodal.name = label
                if(index){
                    this.checkmodal.unit = this.checklist[index].unit
                    this.symbollist = this.checklist[index].symbol
                    this.checkmodal.className = this.checklist[index].className
                }else{
                    this.checkmodal.unit = ''
                    this.symbollist = []
                    this.checkmodal.className = ''
                }
                
            },
            //获取考核周期
            getCheckDate(){
                new Promise((resolve, reject) => {
                    getCheckDate().then(response => {
                        console.log(response.data)
                        if (response.data.err == 0) {
                            this.checkdate  = response.data.data                 
                        } else {
                            this.$Message.error(response.data.info);
                            
                        }
                        resolve();
                    }).catch(error => {
                        reject(error);
                    });
                });
            },
            //添加考核项
            addcheck(){
                this.$refs['checkmodal'].validate((valid) => {
                    if (valid) {
                        this.checkmodal.allname = this.checkmodal.param + this.checkmodal.unit
                        let _obj = Object.assign({},this.checkmodal) 
                        if(this.cou < 0){
                            this.data1.push(_obj)
                        }else{
                            this.data2.push(_obj)
                        }
                        
                        this.showeditModal = false
                        this.$refs['checkmodal'].resetFields()
                    } else {
                        // 通过loading来阻止modal隐藏，然后手动修改loading来充值确定按钮
                        setTimeout(() => {
                            this.loading = false;
                            this.$nextTick(() => {
                                this.loading = true;
                            });
                        }, 2000);
                     }
                })
            },
            //获取全部考核项目的参数
            // getCheck(){
            //     new Promise((resolve, reject) => {
            //         getCheck().then(response => {
            //             if (response.data.err == 0) {                    
            //                 this.checklist =  response.data.data                
            //             } else {
            //                 this.$Message.error(response.data.info);
                            
            //             }
            //             resolve();
            //         }).catch(error => {
            //             reject(error);
            //         });
            //     });
            // },
            getRankList(){
                new Promise((resolve, reject) => {
                    getRankList().then(response => {
                        if (response.data.err == 0) {
                            this.ranklist =  response.data.data
                            this.rank_id = this.ranklist[0].id
                            this.rightTitle = this.ranklist[0].name   
                            this.getDetail()                    
                        } else {
                            this.$Message.error(response.data.info);
                            
                        }
                        resolve();
                    }).catch(error => {
                        reject(error);
                    });
                });
            },
            addcheckbtn(){
                this.showeditModal = true
                this.cou = -1
            },
            addcheckbtn2(){
                this.showeditModal = true
                this.cou = 1
            },
            remove(index){
                this.$Modal.confirm({
                    title: '提示',
                    content: '是否要删除该条记录?',
                    onOk: () => {
                        this.data1.splice(index, 1);                        
                    },
                });                     
            },
            remove2(index){
                this.$Modal.confirm({
                    title: '提示',
                    content: '是否要删除该条记录?',
                    onOk: () => {
                        this.data2.splice(index, 1);                        
                    },
                });
            },
            leftActive(index){
                this.spinShow = true
                this.active = index
                this.rightTitle = this.ranklist[index].name
                this.rank_id = this.ranklist[index].id
                this.data1=[]
                this.data2=[]
                this.getDetail()            
                this.planb = false
            }
        }
    }
    </script>
    